<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开始旅行</title>
    <link rel="stylesheet" href="css/start.css">
</head>
<body>
    <h1>“ 预谋已久，不如说走就走”</h1>
    <div class="flight-box">
        <span>出发</span>
        <input type="range" class="flight" value="0" min="0" max="100" style="--val:0" oninput="this.style='--val:'+this.value" />
        <span>旅行！</span>
    </div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const flightInput = document.querySelector('.flight');
    
    flightInput.addEventListener('input', function() {
        // 更新 --val CSS变量
        this.style.setProperty('--val', this.value);
        
        // 如果滑块值为最大值，则跳转页面
        if (parseInt(this.value) === parseInt(this.max)) {
            window.location.href = 'index.html'; 
        }
    });
});
</script>
</html>